<template>
  <tm-app>
    <tm-navbar title="设置" :followTheme="true" :hideHome="true"> </tm-navbar>
    <tm-sheet :round="4" :padding="[0]" :transprent="true" :margin="[0]">
      <tm-form
        v-if="show"
        @submit="confirm"
        ref="form"
        v-model="userInfo"
        :label-width="190"
      >
        <tm-form-item
          required
          label="用户名称"
          field="userName"
          :rules="[
            {
              required: true,
              message: '用户名称不能为空',
              validator: (val) => val && val.length > 0,
            },
          ]"
        >
          <tm-input
            :inputPadding="[0, 0]"
            v-model="userInfo.userName"
            :transprent="true"
            :showBottomBotder="false"
          >
          </tm-input>
        </tm-form-item>
        <tm-form-item
          required
          label="用户头像"
          field="userHead"
          :rules="{ required: true, message: '请上传用户头像' }"
        >
          <tm-upload
            :rows="1"
            :width="200"
            :height="200"
            :defaultValue="userInfo.userHead ? [userInfo.userHead] : []"
            :maxFile="1"
            :url="`${baseURL}/file/uploadFile`"
            @success="successUpload($event, 'userHead')"
            @remove="removeUpload($event, 'userHead')"
          >
            <tm-image
              v-if="userInfo.userHead"
              :width="200"
              :height="200"
              :src="userInfo.userHead"
            ></tm-image>
            <tm-icon v-else name="tmicon-plus" :followTheme="true"></tm-icon>
          </tm-upload>
        </tm-form-item>

        <tm-form-item
          label="真实名称"
          field="userUealName"
          :rules="[
            {
              required: false,
              message: '真实名称不能为空',
              validator: (val) => val && val.length > 0,
            },
          ]"
        >
          <tm-input
            :inputPadding="[0, 0]"
            v-model="userInfo.userUealName"
            :transprent="true"
            :showBottomBotder="false"
          >
          </tm-input>
        </tm-form-item>
        <tm-form-item
          label="手机号码"
          field="userUealPhone"
          type="number"
          :rules="[
            {
              required: false,
              message: '手机号码不能为空',
              validator: (val) => val && val.length > 0,
            },
            {
              required: false,
              message: '手机号码格式不对',
              validator: (val) => /^1[3-9]\d{9}$/.test(val),
            },
          ]"
        >
          <tm-input
            :inputPadding="[0, 0]"
            v-model="userInfo.userUealPhone"
            :transprent="true"
            :showBottomBotder="false"
          >
          </tm-input>
        </tm-form-item>
        <tm-form-item
          required
          label="收款码"
          field="userMoneyCode"
          :rules="{ required: true, message: '请上传收款码' }"
        >
          <tm-upload
            :rows="1"
            :maxFile="1"
            :width="200"
            :height="200"
            :defaultValue="
              userInfo.userMoneyCode ? [userInfo.userMoneyCode] : []
            "
            @success="successUpload($event, 'userMoneyCode')"
            @remove="removeUpload($event, 'userMoneyCode')"
            :url="`${baseURL}/file/uploadFile`"
          >
          </tm-upload>
        </tm-form-item>

        <tm-form-item :border="false">
          <view class="flex-1 mr-32">
            <tm-button
              form-type="submit"
              label="确定修改"
              block
              :round="20"
            ></tm-button>
          </view>
        </tm-form-item>
      </tm-form>
    </tm-sheet>
  </tm-app>
</template>

<script setup>
import { updUserInfoApi } from "@/api";
import { useUserStore } from "@/store";
import { onMounted, ref, reactive } from "vue";
import { baseURL } from "@/config";

const userStore = useUserStore();
const show = ref(false);

const userInfo = reactive({
  userName: "",
  userHead: "",
  userUealName: "",
  userUealPhone: "",
  userMoneyCode: "",
});

onMounted(() => {
  const userInfoStorage = uni.getStorageSync("userInfo");
  Object.keys(userInfo).forEach((key) => {
    userInfo[key] = userInfoStorage[key];
  });
  show.value = true;
});

const successUpload = (e, key) => {
  console.log(e, key);
  userInfo[key] = JSON.parse(e.response).data;
};
const removeUpload = (e, key) => {
  userInfo[key] = null;
};

const confirm = async (e) => {
  if (e.validate) {
    await updUserInfoApi(e.data);
    userStore.getUserInfo();
    uni.showToast({
      icon: "success",
      title: "修改成功",
    });
    setTimeout(() => {
      uni.navigateBack(-1);
    }, 500);
  }
};
</script>

<style scoped></style>
